<template>
  <div class="project-approval">
    <div class="project-approval-child">
      <table>
          <tr>
              <td colspan="4">项目立项表</td>
          </tr>
          <tr>
              <td colspan="4">
                  <div class="head-content">
                      <div class="deptname">部门：<span>{{ filterData(deptList, "deptId", tabledata.deptId, "deptName") }}</span></div>
                      <div class="project-no">项目编号：<span>{{ tabledata.projectOn }}</span></div>
                  </div>
              </td>
          </tr>
          <tr>
              <td>项目名称</td>
              <td>{{ tabledata.projectName }}</td>
              <td>立项时间</td>
              <td>{{ parseTime(tabledata.projectTime, '{y}-{m}') }}</td>
          </tr>
          <tr>
              <td>客户名称</td>
              <td>{{ filterData(customerList, "customerId", tabledata.customerId, "customerName") }}</td>
              <td>起止时间</td>
              <td>{{ (tabledata.startTime?parseTime(tabledata.startTime, '{y}-{m}'):'') + ' 至 ' + (tabledata.endTime?parseTime(tabledata.endTime, '{y}-{m}'):'') }}</td>
          </tr>
          <tr>
              <td>项目申请人</td>
              <td>{{ filterData(ownerList, "userId", tabledata.applyUser, "userName") }}</td>
              <td>项目负责人</td>
              <td>{{ filterData(ownerList, "userId", tabledata.chargeUser, "userName") }}</td>
          </tr>
          <tr>
              <td>项目性质</td>
              <td colspan="3">
                  <span>(<span style="display: inline-block;margin: 0 15px;">{{tabledata.nature}}</span>)</span>
                  <span v-for="(item,index) in projectNature" :key="item.value" :style="index==0?'display: inline-block;margin: 0 5% 0 15%;':''">{{item.value + "." + item.text}}</span>
              </td>
          </tr>
          <tr>
              <td>项目金额</td>
              <td colspan="3">{{ tabledata.projectSum }}</td>
             
          </tr>
          <tr>
              <td>签订单位</td>
              <td colspan="3">
                  <span>(<span style="display: inline-block;margin: 0 15px;">{{ tabledata.laborContracts }}</span>)</span>
                  <span class="qddw" v-for="item in laborContracts" :key="item.value">{{ item.value + '.' + item.text }}</span>
              </td>
          </tr>
          <tr>
              <td>付款方式</td>
              <td colspan="3">{{ tabledata.paymentTime }}</td>
          </tr>
          <tr>
              <td>预计利润</td>
              <td>{{ tabledata.profit }}</td>
              <td>利润率</td>
              <td>{{ tabledata.profitMargin }}</td>
          </tr>
          <tr>
              <td colspan="4">项目预算成本费用支出及税金</td>
          </tr>
          <tr class="moneytitle">
              <td>预算清单</td>
              <td>预算核算明细</td>
              <td>预算合计</td>
              <td>备注</td>
          </tr>
          <tr v-for="item in tabledata.detailsList" :key="item.detailsId" class="list">
              <td>{{ item.detailsName }}</td>
              <td>{{ item.detailsDesc }}</td>
              <td>{{ item.detailsAmount }}</td>
              <td>{{ item.remark }}</td>
          </tr>
          <tr>
              <td>费用总计</td>
              <td style="width: 24%" colspan="3">{{ tabledata.aggregationCharge }}</td>
          </tr>
          <tr>
              <td>备注</td>
              <td colspan="3">{{ tabledata.remark }}</td>
          </tr>
          <tr class="glyj">
              <td>管理层意见</td>
              <td colspan="3" style="text-align: left;position: relative;">
                {{ tabledata.opinion }}
                <!-- <el-image :src="qm" v-show="process != null && process != 0" style="position: absolute;top:0;left:50px;"></el-image> -->
              </td>
          </tr>
          <tr v-for="(task, index) in tabledata.hisTaskList" :key="index">
            <td style="padding: 0; margin: 0;">审核人签名</td>
            <td colspan="3" style="text-align: left; padding: 0; margin: 0;">
              <el-image  :src="task.signature"  style="height: 80px">
                <div slot="error" class="image-slot">
                  
                </div>
              </el-image>
            </td>
          </tr>
      </table>
    </div>
  </div>
</template>

<script>
// import qmImg from '@/assets/images/qm.png'
import { listDept } from '@/api/system/dept'
export default {
  props:{
    tabledata:{
      type:Object,
      default:{}
    },
    ownerList:{
      type:Array,
      default:[]
    },
    customerList:{
      type:Array,
      default:[]
    },
    process:{
      type:String,
      default:"0"
    }
  },
  data() {
    return {
      // qm: qmImg,
      projectNature:[{
        value:"0",
        text:"过单项目"
      },{
        value:"1",
        text:"公司直签项目"
      }],
      laborContracts:[{
        value:"0",
        text:"治桔"
      },{
        value:"1",
        text:"枢纽"
      },{
        value:"2",
        text:"无合同"
      },{
        value:"3",
        text:"纯返利"
      },{
        value:"4",
        text:"诚石"
      }],
      deptList: []
    }
  },

  methods:{
    listDept(){
      listDept().then(res => {
        this.deptList = res.data
      })
    },
    filterData(arr, arrfiled, filed, returnfiled) {        
        if (filed) {
           const filedStr = String(filed);
          const filedArray = filedStr.split(",");

          const res = arr
            .filter(item => filedArray.includes(String(item[arrfiled])))
            .map(item => item[returnfiled]);

          return res.join(",");
        }

        return '';
      }

  },
  created(){
    this.listDept()
  }
}
</script>
<style scoped>
  /* .project-approval{
    position: relative;
    
  }
  .project-approval-child{
    position: absolute;
    top: -100px;
    left: 0;
  } */
  .head-content{
      display: flex;
  }
  .deptname,.project-no{
      width: 50%;
      text-align: left;
      font-weight: bold;
      padding-left: 10px;
  }
  /* .project-no{
      width: 50%;
  } */
  h2{
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-weight: bold;
  }
  table{
      width: 100%;
      border: 1px solid #000;
      border-collapse: collapse;
      border-spacing: 0;
  }
  td{
      border: 1px solid #000;
      height: 30px;
      line-height: 30px;
      text-align: center;
  }
  td:nth-child(odd){
      width: 24%;
      font-weight: bold;
  }
  td:nth-child(even){
      width: 26%;
  }
  .qddw{
    display: inline-block;
    margin-left: 5%;
  }
  .moneytitle td,.glyj td{
    line-height: 3;
  }
  .moneytitle td:nth-child(even){
    font-weight: bold;
  }
  .list td:nth-child(odd){
    font-weight: normal;
  }
</style>